index.html
<html>
<head>
<title>Create Captcha using PHP,jQuery and AJAX</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="mainform">
<div class="innerdiv">
<h2>Create Captcha using PHP,jQuery and AJAX</h2>
<!-- Required div starts here -->
<form method="post" id="myForm">
<h3>Fill Your Information!</h3>
<br />
<table>
<tr>
<td>Username:</td>
<td><input type="text" name="username" id="username1" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email1" /></td>
</tr>
<tr>
<td>
<br />
<br />
<br />
</td>
<td id="imgparent">
<div id="imgdiv"><img id="img" src="captcha.php" /></div>
<img id="reload" src="reload.png" />
</td>
</tr>
<tr>
<td>Enter Image Text:</td>
<td><input id="captcha1" name="captcha" type="text" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="button" value="Submit" /></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
script.js
$(document).ready(function ()
{
//change CAPTCHA on each click or on refreshing page
$("#reload").click(function ()
{
$("img#img").remove();
var id = Math.random();
$('<img id="img" src="captcha.php?id=' + id + '"/>').appendTo("#imgdiv");
id = '';
});
//validation function
$('#button').click(function ()
{
var name = $("#username1").val();
var email = $("#email1").val();
var captcha = $("#captcha1").val();
if (name == '' || email == '' || captcha == '')
{
alert("Fill All Fields");
}
else
{ //validating CAPTCHA with user input text
var dataString = 'captcha=' + captcha;
$.ajax(
{
type: "POST",
url: "verify.php",
data: dataString,
success: function (html)
{
alert(html);
}
});
}
});
})
verify.php
<?php
//CAPTCHA Matching code
session_start();
if ($_SESSION["code"] == $_POST["captcha"]) {
echo "Form Submitted successfully....!";
} else {
die("Wrong TEXT Entered");
}
?>
captcha.php
<?php
//staring session
session_start();
//Initializing PHP variable with string
$captchanumber = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz';
//Getting first 6 word after shuffle
$captchanumber = substr(str_shuffle($captchanumber), 0, 6);
//Initializing session variable with above generated sub-string
$_SESSION["code"] = $captchanumber;
//Generating CAPTCHA
$image = imagecreatefromjpeg("bg.jpg");
$foreground = imagecolorallocate($image, 175, 199, 200); //font color
imagestring($image, 5, 45, 8, $captchanumber, $foreground);
header('Content-type: image/png');
imagepng($image);
?>
100.46 KB